<template>
	<layout>
		<uv-navbar :fixed="false" :title="title" left-arrow @leftClick="$onClickLeft" />
		<view class="container">
			<view style="padding: 0 30rpx;">
				<!-- user box begin -->
				<view class="d-flex flex-column bg-white user-box">

					<view class="d-flex align-items-center">
						<view class="avatar rounded-circle">
							<image
								:src="isLogin ? member.avatar ? member.avatar : '/static/images/mine/default.png' : '/static/images/mine/default.png'">
							</image>
						</view>
						<view class="d-flex flex-column flex-fill overflow-hidden" style="margin-top: 20rpx;">
							<view v-if="isLogin"
								class="font-size-lg font-weight-bold d-flex justify-content-start align-items-center"
								@tap="serv({type:'pages',pages:'/pages/components/pages/mine/userinfo'})">
								<view class="text-truncate">{{ userInfoData.nickName }}</view>
								<view class="iconfont iconarrow-right line-height-100"></view>
							</view>
							<view v-else class="font-size-lg font-weight-bold" @tap="login">{{ userInfoData.nickName }}
							</view>
						</view>
					</view>

				</view>

			</view>
			<!-- service box begin -->
			<view class="service-box">
				<view class="font-size-lg text-color-base font-weight-bold" style="margin-bottom: 20rpx;">用户信息</view>
				<view class="u-m-t-20">
					<uv-cell-group>
						<block v-for="(item, index) in services" :key='index'>

							<uv-cell icon="integral-fill" :title="item.name" :value="item.value"></uv-cell>


						</block>
					</uv-cell-group>
				</view>

				<view>
					<uv-button @click="logout" type="primary" text="退出登录"></uv-button>

				</view>
			</view>
		</view>


		<uv-modal ref="modalRef" title="退出登录" content='确定要退出登录吗？' showCancelButton confirmText="确认" cancelText="取消"
			@cancel="cancelBtn" @confirm="confirm">

		</uv-modal>
		<uv-toast ref="uToast"></uv-toast>
	</layout>


</template>

<script setup>
	import {
		ref,
		computed
	} from 'vue'
	import {
		useMainStore
	} from '@/store/store'
	import {
		storeToRefs
	} from 'pinia'
	import {
		onLoad,
		onShow
	} from '@dcloudio/uni-app'
	import {
		formatDateTime,
		kmUnit
	} from '@/utils/util'
	import {
		userGetUserInfo,
		mineService
	} from '@/api/user'
	import {
		userInfo
	} from "@/api/login.js"
	const main = useMainStore()
	const {
		member,
		isLogin
	} = storeToRefs(main)

	const title = ref('个人中心')
	const services = ref([])
	const userInfoData = ref({})
	const modalRef = ref(null)
	const userPropList = ref([{
			"name": "用户ID",
			"prop": "userId"
		},
		{
			"name": "用户名",
			"prop": "userName"
		},
		{
			"name": "昵称",
			"prop": "nickName"
		},
		{
			"name": "验证码ID",
			"prop": "captchaId"
		},
		{
			"name": "状态",
			"prop": "status"
		},
		{
			"name": "手机号",
			"prop": "phone"
		},
		{
			"name": "头像",
			"prop": "avatar"
		},
		{
			"name": "性别",
			"prop": "gender"
		},
		{
			"name": "邮箱",
			"prop": "email"
		},

		{
			"name": "租户代码",
			"prop": "tenantCode"
		},
		{
			"name": "租户名称",
			"prop": "tenantName"
		}
	])
	const uToast = ref()
	const growthValue = computed(() => {
		if (!isLogin.value) return 0
		const {
			currentValue,
			needValue
		} = member.value
		return currentValue / (currentValue + needValue) * 100
	})



	onLoad(() => {
		getServices();
	})
	onShow(() => {
		getUserInfo();
	})


	const getUserInfo = async () => {
		if (isLogin.value) {
			let data = await userGetUserInfo();
			if (data) {
				main.SET_MEMBER(data);
			}
		}
	}
	//格式化参数
	const transformData = (input) => {
		// 定义字段名与中文名称的映射
		const fieldMapping = {
			userName: '用户名',
			nickName: '昵称',
			phone: '手机号',
			// avatar: '头像',
			// gender: '性别',
			email: '邮箱',

			tenantCode: '租户代码',
			tenantName: '租户名称'
		};

		// 转换数据
		const result = Object.keys(input).map(key => {
			if (fieldMapping[key]) {
				return {
					name: fieldMapping[key] || key, // 如果映射不存在，则使用原字段名
					prop: key,
					value: input[key]
				};
			}
			return null; //如果映射不存在，返回null
		}).filter(item => item != null);

		return result;
	}
	//取消按钮
	const cancelBtn = () => {
		modalRef.value.close();
	}
	//确认按钮
	const confirm = () => {
		console.log('点击确认按钮');

		uni.removeStorageSync('zh-h5-project-token');
		uni.removeStorageSync('zh-h5-userInfo');

		uni.removeStorageSync('zh-h5-select-module');
		uni.removeStorageSync('zh-h5-select-park');
		// main.SET_MEMBER({});
		// main.SET_TOKEN('');
		uToast.value.show({
			message: '已退出',
			type: 'success'
		});
		setTimeout(function() {
			uni.navigateTo({
				url: "/pages/login/login"
			})
		}, 1000);
	}
	//退出登录按钮
	const logout = () => {
		modalRef.value.open();
	}

	const getServices = async () => {
		let {
			data
		} = await userInfo();
		if (data) {
			userInfoData.value = data.data
			services.value = transformData(data.data)
		}
	}
	const makePhoneCall = (phoneNumber) => {
		uni.makePhoneCall({
			phoneNumber: phoneNumber,
		})
	}
	const login = () => {
		uni.navigateTo({
			url: '/pages/components/pages/login/login'
		})
	}
	const packages = () => {
		if (!isLogin.value) {
			login()
			return
		}
		uni.navigateTo({
			url: '/pages/components/pages/packages/index'
		})
	}
	const serv = (item) => {
		switch (item.type) {
			case 'pages':
				if (!isLogin.value) {
					login()
					return
				}
				uni.navigateTo({
					url: item.pages
				})
				break;
			case 'miniprogram':
				uni.navigateToMiniProgram({
					appId: item.app_id
				})
				break;
			case 'menu':
				uni.navigateTo({
					url: '/pages/components/pages/mine/service?id=' + item.id + '&name=' + item.name
				})
				break;
			case 'content':
				uni.navigateTo({
					url: '/pages/components/pages/mine/content?id=' + item.id + '&name=' + item.name
				})
				break;
		}
	}
</script>

<style lang="scss" scoped>
	page {
		height: auto;
		min-height: 100%;
	}


	.user-box {
		position: relative;
		border-radius: 8rpx;
		margin-bottom: 30rpx;
		margin-top: 70rpx;
		box-shadow: $box-shadow;
	}

	.avatar {
		position: relative;
		margin-top: -35rpx;
		margin-left: 35rpx;
		margin-right: 35rpx;
		width: 160rpx;
		height: 160rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: #FFFFFF;
		box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2);

		image {
			width: 140rpx;
			height: 140rpx;
			border-radius: 100%;
		}

		.badge {
			position: absolute;
			right: -10rpx;
			bottom: -10rpx;
			background-color: #FFFFFF;
			border-radius: 50rem;
			display: flex;
			align-items: center;
			justify-content: center;
			color: $color-warning;
			font-size: 24rpx;
			padding: 8rpx 16rpx;
			box-shadow: 0 0 20rpx rgba($color: #000000, $alpha: 0.2);

			image {
				width: 30rpx;
				height: 30rpx;
			}
		}
	}


	.user-grid {
		width: 25%;
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.value {
			margin-bottom: 20rpx;
		}
	}



	.service-box {
		width: 100%;
		background-color: #FFFFFF;
		padding: 32rpx 30rpx 10rpx;
		box-shadow: $box-shadow;

		.row {
			display: flex;
			flex-wrap: wrap;
			color: $text-color-assist;
			font-size: $font-size-sm;
			padding-bottom: -40rpx;

			.grid {
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				margin-bottom: 40rpx;
				width: 25%;
				position: relative;

				image {
					width: 80rpx;
					height: 80rpx;
					margin-bottom: 20rpx;
				}
			}

			.opacity-0 {
				position: absolute;
				width: 100%;
				height: 100%;
				opacity: 0;
				z-index: 10;
			}

		}
	}
</style>